<template>
    <div class="tableRow">
        <div style="flex: 1">
            <el-card shadow="never">
                <div slot="header" style="display: flex;margin:0px;padding:0px;align-items: center;justify-content: space-between;height: 30px;">
                    <div class="radio-t">
                        <div class="haz-header">{{headerTitle}}</div>
                    </div>
                    
                    <div class="radio-t">
                        <el-tree-select v-model="models.formData.areaId" size="small" style="float: left;margin-right: 10px;" :selectParams="dialog.areaSelectParams"
                        :treeParams="dialog.areaTreeParams"
                        ref="areaTreeSelect" @node-click="checkAreaHandler"/> 
                        <el-select v-model="models.formData.departId" size="small" style="margin-right: 10px;height:40px;" placeholder="请选择调查对象" ref="deptSelect" @change="checkDeptHandler">
                            <el-option-group
                                v-for="group in dialog.deptData"
                                :key="group.label"
                                :label="group.label">
                                <el-option
                                v-for="item in group.options"
                                :key="item.id"
                                :label="item.label"
                                :value="item.id">
                                </el-option>
                            </el-option-group>
                        </el-select>
              
                        <el-button type="primary" icon="el-icon-success" size="small" plain 
                            v-permission="'bus:data:edit'"  @click="submitHandler('0')" style="margin-right: 10px;">保存</el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" plain
                            v-permission="'bus:data:edit'" @click="cancelHandler" style="margin-right: 10px;">取消</el-button>
                        <el-button type="primary" icon="el-icon-success" size="small" plain 
                        v-permission="'bus:data:edit'"  @click="backDataUpdateHandler" style="margin-right: 10px;">返回</el-button>
                    </div>
                </div>
                <el-row style="height: 100vh;margin-top: 0px;padding-top: 0px;">
                    <el-col :span="12">
                        <embed
                            :src="pdfUrl"
                            type="application/pdf"
                            width="100%"
                            height="800px"
                            />
                    </el-col>
                    <el-col :span="12">
                        <survey-model ref="surveyComp" :structureId="models.queryData.structureId"  tableHeight="50vh"></survey-model>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        
    </div>
</template>
<script lang="ts">
import { Component, Vue, Ref } from 'vue-property-decorator';
import OpenMap from '@/components/OpenMap.vue';
import SurveyModel from '@/components/SurveyModel.vue';
import {userWorkAreaTreeSelectData} from '@/api/areaManager';
import {selectInvestObject} from '@/api/dept';
import {getFormData,removeDataCommon} from '@/api/investDataCommon';
 
@Component({ components: { SurveyModel,OpenMap } })
export default class surveyPdf extends Vue {

    @Ref("surveyComp") surveyComp!:any;
    @Ref("areaTreeSelect") areaTreeSelect!:any;
    @Ref("deptSelect") deptSelect!:any;
    @Ref("areaMap") areaMap!:any;
    private headerTitle!:any;
    pdfUrl!:any;
    models: any = {
       
        queryData:{
            structureId: '',
            departId: '',
            id:'',
        },
        deptQuery:{
            areaId:'',
            categoryId:''
        },
        formData:{
            areaId:'',
            departId:'',
            polygon:'',
            status:'0',
            vectorId:'',
            point:'',
        }
    }

    dialog: any = {
        deptData: [],
        deptIdMap:{},
        dialogFormVisible: false,
        title: '对话框',
        isEdit: false,
        isBatchEditDisabled: true,
        isBatchRemoveDisabled: true,

        areaSelectParams: {
            clearable: true,
            placeholder: '请选择区划'
        },
        areaTreeParams: {
            clickParent: true,
            filterable: false,
            accordion: true,
            data: [],
            props: {
                children: 'children',
                label: 'label',
                disabled: 'disabled',
                value: 'id'
            }
        }
    };

    positionChangeHandler(val){
        if(val && val.length >0){
            this.models.formData.point = val.join(',');
        }
    
    }

    generateSequence =(length: number,pre: string): string[] => {
        return Array.from({ length: length }, (_, i) => {
            const number = i + 1;
            const prefix = (number > 9 ? '' : '0');
            return pre+ prefix + number.toString();
        });
    }
    areaSearchFun(value: any): void {
        this.areaTreeSelect.filterFun(value);
    }

    backDataUpdateHandler(){
        this.$destroy();
        this.$router.go(-1);
    }

    submitHandler(status){
        this.surveyComp.handleSubmit(this.models.formData,status);
    }

    cancelHandler(){
        this.handleBatchDelete(this.models.queryData.id)
    }

    getDeptTree(){
        selectInvestObject(this.models.deptQuery).then(res=>{
            this.dialog.deptData = res.data;
            this.dialog.deptData.forEach((group:any) =>{
                group.options.forEach(op =>{
                    this.dialog.deptIdMap[op.id] = op;
                    if(op.checked){
                        this.models.formData.departId = op.id;
                    }
                })
            });
        });
    }

    
    handleBatchDelete(id) {
    //删除
      this.$confirm('确定要删除选定数据吗？', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return removeDataCommon({ 'ids': [id] });
      }).then((response: any) => {
        this.$message.success(response.msg);
        this.$router.back();
      }).catch((e) => {
        console.error(e);
      });
  }

    checkAreaHandler(area:any,node:any,vm:any){
       if(area){
            this.models.formData.areaId = area.id;
            this.models.formData.vectorId = area.vectorId;
            this.models.deptQuery.areaId = area.id;
            let ps = area.position;

            if(ps){
                this.models.position = ps;
            }
            this.models.formData.departId = '';
            this.getDeptTree();
          
       }else{
            this.models.formData.departId= null;
       }
    }

    checkDeptHandler(id:number){
        let opt =  this.dialog.deptIdMap[id];
        this.surveyComp.updateHeadCode('head01',opt.code);
        this.surveyComp.updateHeadCode('head04',opt.label);
        this.surveyComp.updateCode('code01',opt.label);
    }

    created() {
        if(this.$route.params && this.$route.params.structureId){
            this.models.queryData.structureId = this.$route.params.structureId;
            this.models.queryData.id = this.$route.params.id;
            this.models.deptQuery.categoryId =  this.$route.params.categoryId;
            this.models.formData.workId =  this.$route.params.workId;
            this.headerTitle =  this.$route.params.workName + "/"+ this.$route.params.categoryName; 
            this.$store.dispatch('saveDataParams',this.$route.params);
        }
    }
       
    mounted(){
        userWorkAreaTreeSelectData({workId: this.models.formData.workId}).then(res =>{
            this.dialog.areaTreeParams.data = res.data;
            this.areaTreeSelect.treeDataUpdateFun(res.data);
        })

        if(this.models.queryData.id){
            getFormData({id: this.models.queryData.id}).then(res =>{
            
            const common:any = res.data.commonForm;
            if(common.image){
                this.pdfUrl = process.env.VUE_APP_BASE_API +'/resources/file/' + common.image
            
            }
        
            this.models.formData.areaId = common.areaId;
            this.models.deptQuery.areaId = common.areaId;
            this.getDeptTree();
            this.models.formData.vectorId = common.vectorId;
            this.models.formData.departId = common.departId;
            if(common.position) {
                this.models.formData.point  = common.position;
            }

            this.models.formData.polygon  = common.polygon;
            this.surveyComp.addFormData(res.data);
        })
        }
    }
}
</script>
<style scoped>
.el-input__inner {
    height:30px;
}
.data-tool{
    .el-input  {
        float: right;
    }
}
.haz-header{
    height: 28px;
    line-height: 28px;
    color: #448f7d !important;
    padding-left: 18px;
    border-left: 3px solid #448f7d  !important;
    font-size: 14px;
    font-weight: bold;
    background: linear-gradient(to right, #e1f5f1, rgba(255, 255, 255, 1)) !important;
  }

::v-deep .el-card .el-card__header {
    padding: 6px 10px !important;
}
::v-deep .el-card__body {
    padding: 0px 5px 0px 5px !important;
}
</style>
